import React, {useRef, useState} from 'react';
import styles from './login.module.scss'
import {CloseOutline, LeftOutline} from "antd-mobile-icons";
import {Toast} from "antd-mobile";
import {AiFillApple, AiOutlineWechat} from "react-icons/ai";
import {FaWeibo} from "react-icons/fa";
import {useNavigate} from "react-router-dom";
import axios from 'axios'

const Login = () => {
    const [phone, setPhone] = useState('');
    const [code,setCode] = useState('')
    const [flag, setFlag] = useState(false);
    const radioRef = useRef(null)
    const navigate = useNavigate()
    const getCodeFun = async() => {

        if(phone.length!==11) return null
        const res = await axios.post("http://127.0.0.1:8000/api/login_phone/", {phone})
        console.log(res.data)
        Toast.show({
            content: '已发送',
        })

        setFlag(true)
    }

    const submitFun = async () => {
        if(code.length!==4) return null
        if(!radioRef.current.checked) {
            Toast.show({
                content: '请阅读并同意用户协议',
            })
            return null
        }
        const res = await axios.post("http://127.0.0.1:8000/api/login_code/",{phone,code})
        const data = res.data
        if(data.code===201){
            Toast.show({
                content: data.msg,
                afterClose:()=>{

                }
            })
        }else if(data.code ===200){
            console.log(data.data,'userInfo')

            navigate('/home')
        }


    }
    return (
        <div className={styles.wrapper}>
            <div className={styles.top}>
                <LeftOutline onClick={()=>navigate(-1)}/>
            </div>
            <div className = {styles.form}>
                <h1 className = {styles.title}>
                    欢迎使用易阅读
                </h1>
                {
                    flag && flag ? (
                        <>
                            <div className = {styles.inputBox}>
                                <input
                                    className={styles.inp}
                                    type="number"
                                    placeholder={'输入验证码'}
                                    value={code}
                                    onChange={(e)=>setCode(e.target.value)}
                                />
                                <CloseOutline
                                    className={styles.clearIcon}
                                    style={{display:code.length?'block':'none'}}
                                    onClick={()=>setCode('')}
                                />
                            </div>
                            <div className = {styles.btnBox}>
                                <div
                                    className = {styles.btn}
                                    style={{opacity : code.length===4?'1':'.4',backgroundColor:'rgb(19, 212, 200)'}}
                                    onClick={submitFun}
                                >
                                    登录
                                </div>
                            </div>
                        </>
                    ) : (
                        <>
                            <div className = {styles.inputBox}>
                                <input
                                    className={styles.inp}
                                    type="number"
                                    placeholder={'输入手机号'}
                                    value={phone}
                                    onChange={(e)=>setPhone(e.target.value)}
                                />
                                <CloseOutline
                                    className={styles.clearIcon}
                                    style={{display:phone.length?'block':'none'}}
                                    onClick={()=>setPhone('')}
                                />
                            </div>
                            <div className = {styles.btnBox}>
                                <div
                                    className = {styles.btn}
                                    style={{opacity : phone.length===11?'1':'.4'}}
                                    onClick={getCodeFun}
                                >
                                    获取短信验证码
                                </div>
                            </div>
                        </>
                    )
                }


                <div className = {styles.selectBox}>
                    <input
                        ref={radioRef}
                        type="radio"
                    />
                    <span className = {styles.text}>我已阅读并同意<span className = {styles.textColor}> 《用户隐式政策》 </span></span>
                </div>

            </div>

            <div className={styles.footer}>
                <div className={styles.footerText}>其他登录方式</div>
                <div className={styles.footerContent}>
                    <AiOutlineWechat className={styles.wechatIcon}/>
                    <AiFillApple className={styles.appleIcon}/>
                    <FaWeibo className={styles.weiboIcon}/>
                </div>
            </div>

        </div>
    );
};

export default Login;
